<script lang="ts" setup>
import { format } from 'date-fns';
import { useLocale } from '@/locale/locale';

defineProps(['requiredBook', 'amount', 'countdown']);
defineEmits(['openCheckInGuide']);

const { t } = useLocale();
</script>

<template>
  <view class="mb-5 flex items-center">
    <image class="order-details__status-icon" src="/static/order_details_wait.png" />
    <view class="flex-1 ml-2">
      <view class="order-details__status-title">
        {{ t('LOKey_orderToPay') }}
      </view>
      <view class="order-details__status-tips">
        {{
          t('LOKey_orderPayBeforeAt', { time: format(Date.now() + Math.abs(countdown), 'HH:mm') })
        }}
      </view>
    </view>
  </view>
  <view class="mb-2_5 order-details__status-cell">
    <view class="flex items-center">
      <view class="text-base text-primary font-medium">
        {{ t('LOKey_orderNeedPayOnline') }}
      </view>
      <view class="ml-1 text-sm text-red">
        <text>¥</text>
        <text class="text-lg">{{ amount }}</text>
        <text>JPY</text>
      </view>
    </view>
    <view class="text-sm text-fourth">
      {{ t('LOKey_orderPayTimeout') }}
    </view>
  </view>
  <view class="order-details__status-cell">
    <view class="flex items-center" @click="$emit('openCheckInGuide')">
      <view class="mr-2 text-base text-primary font-medium">
        {{ t('LOKey_orderCheckInRead') }}
      </view>
      <view class="flex-1 text-sm text-primary truncate">
        {{ requiredBook }}
      </view>
      <uni-icons color="#999" size="10" type="right" />
    </view>
  </view>
</template>

<style lang="scss">
.order-details__status-icon {
  height: 72rpx;
  width: 72rpx;
}

.order-details__status-title {
  color: #fff;
  font-size: 36rpx;
  line-height: 50rpx;
}

.order-details__status-tips {
  color: #fff;
  font-size: 24rpx;
  line-height: 34rpx;
}

.order-details__status-cell {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 32rpx 24rpx;
}
</style>
